<head>
  <title>SVG Clock Demo</title>
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg"
       width="350" height="350"
       viewBox="-110 -110 220 220"
       style="display: block; margin: 0 auto;">

    <!-- bounding circle -->
    <circle style="stroke: black; fill: #eee;"
            cx="0" cy="0" r="100"/>

    <!-- hour, minute and second hands -->
    {{#with handData}}
      <line {{radial hourDegrees 0 .55}}
            style="stroke-width: 6px;
                   stroke: green;" />
      <line {{radial minuteDegrees 0 .85}}
            style="stroke-width: 4px;
                   stroke: blue;" />
      <line {{radial secondDegrees 0 .95}}
            style="stroke-width: 2px;
                   stroke: red;" />
    {{/with}}

    <!-- tick marks -->
    {{#each hours}}
      <line {{radial degrees 0.9 1}}
            style="stroke-width: 3px;
                   stroke: black;" />
    {{/each}}
  </svg>
</body>

<!-- Adapted from David Basoko's SVG clock demo -->
